<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="bootstrap-4.2.1.min.css">
    <link rel="stylesheet" href="bootstrap-select.css">

    <link href="xterm.css" rel="stylesheet"/>
    <link href="main.css" rel="stylesheet"/>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <!--    <script src="jquery-3.3.1.slim.min.js"></script>-->
    <script src="jquery-3.3.1.js"></script>
    <script src="popper-1.14.6.min.js"></script>
    <script src="bootstrap-4.2.1.min.js"></script>
    <script src="xterm.js" type="text/javascript"></script>
    <script src="web-console.js"></script>
    <script src="arthas.js" type="text/javascript"></script>
    <script src="bootstrap-4.2.1.min.js"></script>


    <script type="text/javascript">
        window.addEventListener('resize', function () {
            if (ws !== undefined && ws !== null) {
                let terminalSize = getTerminalSize();
                ws.send(JSON.stringify({action: 'resize', cols: terminalSize.cols, rows: terminalSize.rows}));
                xterm.resize(terminalSize.cols, terminalSize.rows);
            }
        });

        var registerApplications = null;
        var applications = null;
        $(document).ready(function () {
            reloadRegisterApplications();
            reloadApplications();
        });


        function httpPostForm(PARAMS) {

            var temp = document.createElement("form");
            temp.method = "post";
            temp.style.display = "none";
            for (let [x,v] of PARAMS) {
                if (x == 'file'){
                    var v1 = v.cloneNode(true);
                    temp.appendChild(v1)
                }else {
                    var opt = document.createElement("textarea");
                    opt.name = x;
                    opt.value = v;
                    temp.appendChild(opt);
                }

            }

            return temp;
        }


        function uploadFile() {
            var file = document.getElementById('file');
            var server = document.getElementById('selectServer');

            var index = server.selectedIndex

            if (index == -1){
                alert("请指定服务器地址！")
                return
            }
            targetIp = server.options[index].value ;

            if (file.files.length < 1){
                alert("请选择需要上传的文件！")
                return
            }
            if (!targetIp){
                alert("请指定服务器地址！")
                return
            }

            var params = new Map([['targetIp',targetIp],['file',file]])

            var form = httpPostForm(params)

            formData = new FormData(form);
            $.ajax({
               url:"/api/files/upload",
               type:"post",
               data:formData,
               processData:false,
               contentType:false,
               success:function(res){
                  if(res.status == 'ok'){
                     alert("上传成功！");
                  }else{
                     alert(res.msg);
                  }
               },
               error:function(err){
                  alert("网络连接失败,稍后重试",err);
               }

              })

             }

    </script>

    <title>Arthas Console</title>
</head>

<body>
<nav class="navbar navbar-expand navbar-light bg-light flex-column flex-md-row bd-navbar">
    <!--    <a href="https://github.com/alibaba/arthas" target="_blank" title="" class="navbar-brand"><img src="logo.png"-->
    <!--                                                                                                   alt="Arthas" title="Welcome to Arthas web console" style="height: 25px;" class="img-responsive"></a>-->

    <!--    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"-->
    <!--            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">-->
    <!--        <span class="navbar-toggler-icon"></span>-->
    <!--    </button>-->

    <!--    <div class="collapse navbar-collapse" id="navbarSupportedContent">-->
    <!--        <ul class="navbar-nav mr-auto">-->
    <!--            <li class="nav-item active">-->
    <!--                <a class="nav-link" href="https://arthas.aliyun.com/doc" target="_blank">Documentation-->
    <!--                    <span class="sr-only">(current)</span></a>-->
    <!--            </li>-->
    <!--            <li class="nav-item">-->
    <!--                <a class="nav-link" href="https://arthas.aliyun.com/doc/arthas-tutorials.html" target="_blank">Online Tutorials</a>-->
    <!--            </li>-->
    <!--            <li class="nav-item">-->
    <!--                <a class="nav-link" href="https://github.com/alibaba/arthas" target="_blank">Github</a>-->
    <!--            </li>-->
    <!--        </ul>-->
    <!--    </div>-->

    <form class="form-inline my-2 my-lg-0">
        <div class="col">
            <div class="input-group ">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="ip-addon">IP</span>
                </div>
                <input value="127.0.0.1" v-model="ip" type="text" class="form-control" name="ip" id="ip"
                       placeholder="please enter ip address" aria-label="ip" aria-describedby="ip-addon">
            </div>
        </div>

        <div class="col">
            <div class="input-group ">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="port-addon">Port</span>
                </div>
                <input value="7777" v-model="port" type="text" class="form-control" name="port" id="port"
                       placeholder="please enter port" aria-label="port" aria-describedby="port-addon">
            </div>
        </div>

        <div class="col">
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text" id="agentId-addon">AgentId</span>
                </div>
                <select id="selectServer" data-type="btn-info" class="bootstrap-select"></select>
            </div>
            <!--            <div class="input-group ">-->
            <!--                <div class="input-group-prepend">-->
            <!--                    <span class="input-group-text" id="agentId-addon">AgentId</span>-->
            <!--                </div>-->
            <!--                <input value="" v-model="agentId" type="text" class="form-control" name="agentId" id="agentId"-->
            <!--                    placeholder="please enter agentId" aria-label="agentId" aria-describedby="agentId-addon">-->
            <!--            </div>-->
        </div>

        <div class="col-inline">
            <button title="connect" type="button" class="btn btn-info form-control" onclick="startConnect()">Connect
            </button>
            <button title="disconnect" type="button" class="btn btn-info form-control" onclick="disconnect()">
                Disconnect
            </button>
<!--            <a id="arthasOutputA" target="_blank" href="arthas-output/" class="btn btn-info" role="button"-->
<!--               onclick="updateArthasOutputLink()">Arthas Output</a>-->

        </div>

    </form>
    <form class="col-inline upload" id="upload" enctype="multipart/form-data" method="post">
        <input id="file" style="margin-left: 5px; width: 200px; margin-right: 15px;"  type="file" name="file" />
        <input type="button" id="uploadButton" value="提交" onclick="uploadFile();" />
    </form>

</nav>

<div class="container-fluid px-0">
    <div class="col px-0" id="terminal-card">
        <div id="terminal"></div>
    </div>
</div>

<div title="fullscreen" id="fullSc" class="fullSc">
    <button id="fullScBtn" onclick="xtermFullScreen()"><img src="fullsc.png"></button>
</div>
</body>

</html>